<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.all.js"></script>
</head>
<body>
<div class="user-login-box user-login-body layui-form">
    <div class="layui-form-item">
        <label>姓名</label>
        <input type="text" name="name" id="name"  placeholder="请输入姓名"
               class="layui-input">
    </div>
    <div class="layui-form-item">
        <label>玉照</label>
        <div>
            <img src="/image/no.jpg" id="image" style="width: 60px;height: 60px;cursor:pointer">
        </div>

        <button type="button" class="layui-btn layui-btn-xs " id="btnUpload"
                style="margin-top: 10px;margin-left: 5px">
            <i class="layui-icon">&#xe67c;</i>上传
        </button>
    </div>
    <div class="layui-form-item">
        <button id="loginBtn" class="layui-btn layui-btn-fluid"  type="button">注册</button>
    </div>
</div>
</div>
</body>
</html>

<script>
    var upload = layui.upload;
    var  $ =  layui.$;
    var filename = null;
    upload.render({
        elem:'#btnUpload',
        url:'/upload',
        auto:true,
        before:function(obj){
            obj.preview(function (index, file, result) {
                //result是文件的base64内容
               document.getElementById("image").src=result;
            });
        },
        done:function(result) {
           console.log(result);
           filename = result.data;//新文件名
        }
    })


    $("#loginBtn").click(function () {
        var name = $("#name").val();
        $.ajax(
            {
                url:'/regist',
                data:{name:name,filename:filename},
                success:function(res)
                {
                    layer.msg("注册成功");
                }
            }

        );
    });
</script>


